<template>
    <div class="box">
        <section>
            <div class="zhuce_img">
                <img src="/img/logo.png" alt="雷蛇之家">
            </div>
            <h1>注册雷蛇账号</h1>
            <div class="zhuce_input">
                <p>用户名</p>
                <div class="zhuce_china">
                    <input type="text" name="" class="zhuce_chinacity" placeholder="输入用户名" v-model="username"/>
                </div>
                <p class="phtop">密码</p>
                <div class="zhuce_phone">
                    <input type="text" class="zhuce_phoneinput" value="" placeholder="请输入密码" v-model="password" />
                </div>
				<p class="email">邮箱</p>
                <div class="zhuce_email">
                    <input type="text" class="zhuce_phoneemail" value="" placeholder="请输入邮箱" v-model="email" />
                </div>
                <button type="button" class="btn" @click="Register">
					<a>立即注册</a>
					<!-- <router-link to="/Login">立即注册</router-link> -->
				</button>
            </div>
            <p class="yuedu">已经阅读：小米用户协议和隐私政策</p>
        </section>
        <footer>
				<p>简体&nbsp;|&nbsp;繁体&nbsp;|&nbsp;English&nbsp;|&nbsp;常见问题&nbsp;|&nbsp;隐私政策</p>
				<p>小米公司版权所有-京ICP备10046444--京公网安办京ICP证110507号</p>
		</footer>
    </div>
</template>

<script>
import {Data} from '../assets/js/request'

export default {
	data(){
		return {
			username:'',
			password:'',
			email:''
		}
	},
	methods:{
		async Register(){
			let data = {
				"username":"wow",
				"password":"adc486153",
				"email":"965526304@qq.com"
			}
			let res = await Data('post','register',data)
			// let res = axios.post(
			// 	register,
			// 	data
			// )
			console.log(res);
		}
	},
	// mounted(){
	// 	console.log('是否比l快');
	// 	this.$store.commit('changeShow',false)
	// },
	// beforeDestroyed(){
	// 	this.$store.commit('changeShow',true)
	// },
}
</script>

<style scoped>
section{
	width: 849px;
	height: 453px;
	background-color: #FFFFFF;
	margin: 0 auto;
}
.zhuce_img{
	width: 49px;
	height: 49px;
	margin:0 auto;
}
img{
	width: 100%;
	height: 100%;
}
section h1{
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	margin-top: 30px;
}

.zhuce_input{
	width: 346px;
	height: 251px;
	margin: 0 auto;
}
.zhuce_china,.zhuce_phone,.zhuce_phoneemail{
	width: 100%;
	height: 43px;
	display: flex;
	justify-content: space-between;
	margin:10px 0px;
}
.zhuce_chinacity{
	width: 100%;
}
.zhuce_chinaselect{
	width: 20%;
	height: 43px;
}
.phtop{
	margin: 10px 0px;
}
.zhuce_chinaselect{
	width: 20%;
	height: 43px;
}
.zhuce_phoneinput{
	width: 100%;
}
.btn{
	width: 100%;
	height: 43px;
	border: 0px;
	background-color: #FF6700;
	color: white;
}
.btn a{
	text-decoration-line: none;
	color: white;
}
.yuedu{
	margin-top: 50px;
	font-size: 12px;
	text-align: center;
}
footer{
	width: 100%;
	height: 153px;
	font-size: 12px;
}
footer p:first-child{
	margin-top: 100px;
	margin-bottom: 20px;
}
footer p{
	text-align: center;
}
</style>



